<template>
    <div class="language">
        <div class="title">{{ $t('my.语言设置') }}</div>
        <div class="language_content">
            <div class="language_header">{{ $t('my.语言设置') }}</div>
            <div class="picker_view">
                <div class="item" @click="change('zh')">
                    <span>{{ $t('my.简体中文') }}</span>
                    <img src="@/assets/image/ok.png" v-if="type == 'zh'">
                </div>
                <div class="item" @click="change('en')">
                    <span>{{ $t('my.英文') }}</span>
                    <img src="@/assets/image/ok.png" v-if="type == 'en'">
                </div>
            </div>
            <div class="language_footer">
                <el-button type="primary" @click="submit">确定</el-button>
                <el-button type="primary" plain>取消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            type: this.$i18n.locale
        }
    },
    mounted() {
        this.type = localStorage.getItem('language') || 'zh';
    },
    methods: {
        change(value) {
            this.type = value;
        },
        submit() {
            this.$store.commit('changeLanguage', this.type)
            this.$i18n.locale = this.type;
            localStorage.setItem('language', this.type)
        }
    }
}
</script>

<style lang="scss" scoped>
.language {
    min-width: 100%;
    min-height: 100%;
    border-radius: 10px 10px 0 0;
    padding: 24px;
    box-sizing: border-box;
    background: #FCFCFE;
    position: relative;

    .title {

        font-weight: bold;
        font-size: 20px;
        color: #333333;
        padding-bottom: 16px;
        display: flex;
        justify-content: space-between;
    }

    .language_content {
        width: 426px;
        padding: 24px;
        box-sizing: border-box;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px 4px 4px 4px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .language_header {
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            color: #333333;
            padding-bottom: 16px;
        }

        .picker_view {
            background: #F5F5F5;
            border-radius: 8px 8px 8px 8px;

            .item {
                height: 52px;
                padding: 0 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: default;

                &:first-child {
                    border-bottom: 1px solid #EDEDED;
                }

                span {
                    font-size: 16px;
                    color: #333333;
                }

                img {
                    width: 24px;
                    height: 24px;
                }
            }
        }

        .language_footer {
            margin-top: 48px;
            display: flex;
            justify-content: center;

            .el-button {
                width: 118px;
                height: 32px;
            }
        }
    }
}
</style>